<template>
  <div id="app">
    <!-- <div class="banners">



			<div class="heads " style="margin: 0 0 5%;">

				<div class="" style="">
					<img :src="picurlsss" alt="">

				</div>
			</div>
		</div> -->

    <div class="huodong " v-if="istrue">
      <div class="a1" style="text-align: center;padding-top: 1px;position: relative;padding-bottom: 3%;">
        <img src="/static/image/a2.png" alt="" style="width: 50%;margin: -3px auto 0;">
        <div style="position: absolute;top: 0;width: 100%;text-align: center;color: #ffffff;">报名详情</div>
      </div>
      <div class="a2" style="min-height: 400px;">
        <div class="hongs">
          <van-cell-group>
            <van-cell title="姓名" :value="info.bmxin.name" />
            <van-cell title="性别" :value="info.bmxin.sex" />
            <van-cell title="手机号" :value="info.bmxin.tel" />
            <van-cell title="微信号" :value="info.bmxin.wxnumber" />
            <van-cell title="学校" :value="info.bmxin.xuexiao" />
            <van-cell title="报名渠道" :value="info.bmxin.bmqd" />
          </van-cell-group>
        </div>
        <div class="txsss" style="border-bottom: 2px solid #f2f2f2;">
          <van-field class="info-dtitle" label="头像" :border="false" readonly />
          <img :src="info.bmxin.avatar" @click="preview()" style="width: 80px;height: 80px;border-radius: 50%;margin: 5px;" />
        </div>

        <div class="photo" style="border-bottom: 2px solid #f2f2f2;">
          <van-field class="info-dtitle" label="照片" :border="false" value="分辨率：72pdi" readonly />
          <img :src="info.bmxin.photo" @click="preview1()" style="width: 100px;margin: 5px;" />
        </div>
        <div class="jianjie" style="border-bottom: 2px solid #f2f2f2;">
          <van-field class="info-dtitle" label="个人简介" :border="false" readonly />
          <van-field v-model="info.bmxin.content" rows="1" autosize label="" type="textarea" disabled placeholder="请输入个人简介" />
          <div class="piclists" style="display: flex;flex-wrap: wrap;">
            <img :src="img" alt="" :key="index" @click="preview2(index)" v-for="(img, index) in images" style="width: 30%;height: 100px;margin: 5px 1.5%;" />
          </div>
        </div>
      </div>

    </div>
    <div class="huodong new" v-if="!istrue">
      <div class="a1" style="text-align: center;padding-top: 1px;position: relative;padding-bottom: 3%;">
        <!-- <img src="/static/image/a2.png" alt="" style="width: 50%;margin: -3px auto 0;"> -->
        <!-- <div style="position: absolute;top: 0;width: 100%;text-align: center;color: #ffffff;">我要报名</div> -->
      </div>
      <div class="a2" style="min-height: 400px;">
        <div style="border-bottom: 2px solid #888888;">
          <van-field v-model="name" label="姓名" placeholder="请输入姓名" />
        </div>
        <div style="border-bottom: 2px solid #888888;">
          <van-field readonly clickable name="picker" right-icon="arrow-down" :value="sex" label="性别" placeholder="点击选择性别" @click="showPicker = true" />
        </div>
        <div style="border-bottom: 2px solid #888888;">
          <van-field type="tel" v-model="tel" label="手机号" placeholder="请输入手机号" />
        </div>
        <div style="border-bottom: 2px solid #888888;">
          <van-field v-model="wxnumber" label="微信号" placeholder="请输入微信号" />
        </div>
        <div style="border-bottom: 2px solid #888888;">
          <van-field v-model="xuexiao" label="学校" placeholder="请输入学校" />
        </div>
        <div style="border-bottom: 2px solid #888888;">
          <van-field readonly clickable name="picker" right-icon="arrow-down" :value="bmqd" label="报名渠道" placeholder="点击选择渠道" @click="showPicker1 = true" />
        </div>
        <div class="txsss" style="border-bottom: 2px solid #888888;">
          <van-field class="info-dtitle" label="头像" :border="false" readonly />
          <van-uploader class="mt-3" :max-size="3 * 1024 * 1024" :before-read="beforeRead" @oversize="onOversize" v-model="picurllist" :max-count="1" :before-delete="picurlDelete">
          </van-uploader>
        </div>

        <div class="photo" style="border-bottom: 2px solid #888888;">
          <van-field class="info-dtitle" style="color:#888" label="照片" :border="false" value="分辨率：72pdi" readonly />
          <van-uploader class="mt-3" :max-size="3 * 1024 * 1024" :before-read="beforeRead1" @oversize="onOversize" v-model="picurllist1" :max-count="1" :before-delete="picurlDelete1">
          </van-uploader>
        </div>
        <div class="jianjie" style="border-bottom: 2px solid #888888;">
          <van-field class="info-dtitle" label="个人简介" :border="false" readonly />
          <van-field v-model="message" rows="1" autosize label="" type="textarea" placeholder="请输入个人简介" />
          <van-uploader class="mt-3" multiple :max-size="3 * 1024 * 1024" :before-read="beforeRead2" @oversize="onOversize" v-model="picurllist2" :max-count="6" :before-delete="picurlDelete2">
          </van-uploader>
        </div>
        <div class="anniu" style="padding: 3% 0 2%;">
          <div round block class="deng3" @click="onSubmit()">立即报名</div>

        </div>
        <!-- 剪裁图片组件 -->
        <van-popup class="bg-tran" v-model="showCropper" closeable position="top" :style="{ height: '100%' }">
          <div class="flex-column-center height100">
            <app-VueCropper ref="cropper" :img="option.img" :outputSize="option.outputSize" :outputType="option.outputType" :info="option.info" :full="option.full" :autoCropWidth="option.autoCropWidth" :autoCropHeight="option.autoCropHeight" :canMove="option.canMove" :canMoveBox="option.canMoveBox" :original="option.original" :autoCrop="option.autoCrop" :fixed="option.fixed" :fixedNumber="option.fixedNumber" :centerBox="option.centerBox" :infoTrue="option.infoTrue" :fixedBox="option.fixedBox" :high="option.high" :mode="option.mode"></app-VueCropper>
            <div class="popup_bottom">
              <div class="bottom_item"><span @click="cancelCropper">取消</span></div>
              <div class="bottom_item"><span @click="changeScale(-1)">缩小</span></div>
              <div class="bottom_item"><span @click="rotateImage" class="font18">
                  <van-icon name="replay" />
                </span></div>
              <div class="bottom_item"><span @click="changeScale(1)">放大</span></div>
              <div class="bottom_item"><span @click="getCropBlob">确定</span></div>
            </div>
          </div>
        </van-popup>
        <!-- 剪裁图片组件  @click="changeScale(1)"-->
        <van-popup class="bg-tran" v-model="showCropper1" closeable position="top" :style="{ height: '100%' }">
          <div class="flex-column-center height100">
            <app-VueCropper ref="cropper" :img="option.img" :outputSize="option.outputSize" :outputType="option.outputType" :info="option.info" :full="option.full" :autoCropWidth="option.autoCropWidth" :autoCropHeight="option.autoCropHeight" :canMove="option.canMove" :canMoveBox="option.canMoveBox" :original="option.original" :autoCrop="option.autoCrop" :fixed="option.fixed" :fixedNumber="option.fixedNumber1" :centerBox="option.centerBox" :infoTrue="option.infoTrue" :fixedBox="option.fixedBox" :high="option.high" :mode="option.mode"></app-VueCropper>
            <div class="popup_bottom">
              <div class="bottom_item"><span @click="cancelCropper">取消</span></div>
              <div class="bottom_item"><span @click="changeScale(-1)">缩小</span></div>

              <div class="bottom_item"><span @click="rotateImage" class="font18">
                  <van-icon name="replay" />
                </span></div>
              <div class="bottom_item"><span @click="changeScale(1)">放大</span></div>
              <div class="bottom_item"><span @click="getCropBlob1">确定</span></div>
            </div>
          </div>
        </van-popup>
      </div>

    </div>
    <div style="height: 60px;"></div>
    <van-popup v-model="showPicker" position="bottom">
      <van-picker show-toolbar :columns="columns" @confirm="onConfirm" @cancel="showPicker = false" />
    </van-popup>
    <van-popup v-model="showPicker1" position="bottom">
      <van-picker show-toolbar :columns="columns1" @confirm="onConfirm1" @cancel="showPicker1 = false" />
    </van-popup>
    <div class="mask" v-if="!isRz">
      <div class="content">
        <van-cell-group class="group">
          <van-field class="ipt" v-model="authInfo.name" type="text" clearable placeholder="姓名" />
          <van-field class="ipt" v-model="authInfo.idCard" type="digit" center placeholder="身份证">
          </van-field>
          <div @click="getAuth" class="lastBtn ipt">立即认证</div>
        </van-cell-group>
        <div class="note">
          <img src="/static/img/fc.png" alt="">
          <p>蜂巢实时保障您的信息安全</p>
        </div>
      </div>
    </div>
    <div id="Loading" v-show="loadings">
      <div class="loader-inner ball-beat">
        <div></div>
        <div></div>
        <div></div>
      </div>
    </div>
  </div>
</template>
import 'vant/lib/index.less';
<style>
@notice-bar-text-color: #000000;
.vue-cropper {
  height: 93% !important;
}
.huodong {
  padding: 0 2% 2%;
}

.txsss .van-uploader__preview-image {
  border-radius: 50%;
}

.van-cell::after {
  border: none;
}

.hongs .van-cell {
  border-bottom: 2px solid #f2f2f2;
}

.van-field__label {
  width: 60px;
}

.van-cell {
  padding: 10px 10px;
}

.van-button {
  border: none;
}
.jianjie .van-field__control:disabled {
  color: #000000;
}
.deng3 {
  padding: 3% 0;
  width: 70% !important;
  background-color: #fc6e20;
  background-blend-mode: normal, normal;
  border-radius: 40px;
  text-align: center;
  margin: 20px auto 0;
  color: #222222;
  font-size: 16px;
  color: #ffffff;
  border: none !important;
}

.photo .van-field__label {
  width: 60px;
}

.photo .van-field__control {
  font-size: 12px;
}

.van-field__control {
  font-size: 12px;
}
</style>
<style scoped>
.new.huodong {
  border-radius: 0;
  background-color: #262426;
  margin: 0;
  padding: 3% 9%;
  padding-top: 40px;
}
.new.huodong .van-cell {
  background-color: #262426;
  padding-left: 0;
}
/deep/.new.huodong .van-cell .van-cell__title {
  color: #fff;
}
/deep/.new.huodong .van-cell .van-cell__value .van-field__control {
  color: #888;
}
/deep/.new.huodong
  .van-cell
  .van-cell__value
  .van-field__control::-webkit-input-placeholder {
  font-size: 12px;
  color: #888;
}
.mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}
.content {
  box-sizing: border-box;
  padding: 20px;
  width: 84vw;
  height: 50vh;
  margin: 20vh auto 0;
  background-image: url("/static/img/yz1.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.content .group {
  margin-top: 65%;
  background-color: transparent;
}
.content .group .ipt {
  border: 1px solid #fc6e20;
  margin-bottom: 12px;
  border-radius: 24px;
  padding: 5px 10px;
}
.lastBtn {
  background-color: #fc6e20;
  text-align: center;
  color: #fff;
  font-size: 14px;
}
.note {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: #999;
}
.note img {
  margin-right: 5px;
}
</style>
<script>
import Vue from 'vue';
import {
  NoticeBar
} from 'vant';
import {
  Search
} from 'vant';
import {
  Toast
} from 'vant';
import {
  CountDown
} from 'vant';
import {
  VueCropper
} from 'vue-cropper'
import {
  Cell,
  CellGroup
} from 'vant';
import { ImagePreview } from 'vant';

// 全局注册
Vue.use(ImagePreview);
Vue.use(Cell);
Vue.use(CellGroup);
import Compressor from 'compressorjs';
Vue.use(CountDown);
Vue.use(Search);
Vue.use(NoticeBar);


Vue.use(Toast);
export default {
  data() {
    return {
      // 认证信息
      authInfo: {
        name: '',
        idCard: '',
      },
      isRz: localStorage.getItem('is_certified') * 1,
      info: [],
      value: '',
      immediate: false,
      loading: false,
      finished: false,
      description: '',
      content: '',
      columns: ['男', '女'],
      columns1: ['社团', '经纪人', '通告', '广告', '新闻'],
      showPicker: false,
      name: '',
      tel: '',
      wxnumber: '',
      picurllist: [],
      showCropper: false, // 截图弹窗遮罩默认隐藏
      imageAccept: "/jpg,/png,/jpeg",
      imageFileName: '',
      option: {
        img: '',
        outputSize: 0.7,
        info: false, // 裁剪框的大小信息
        outputType: 'jpeg', // 裁剪生成图片的格式
        canScale: false, // 图片是否允许滚轮缩放
        autoCrop: true, // 是否默认生成截图框
        autoCropWidth: window.innerWidth - 0 + 'px', // 默认生成截图框宽度
        autoCropHeight: window.innerWidth - 0 + 'px', // 默认生成截图框高度
        high: true, // 是否按照设备的dpr 输出等比例图片
        fixedBox: true, // 固定截图框大小 不允许改变
        fixed: true, // 是否开启截图框宽高固定比例
        fixedNumber: [1, 1], // 截图框的宽高比例
        fixedNumber1: [3, 4], // 截图框的宽高比例
        full: true, // 是否输出原图比例的截图
        canMoveBox: false, // 截图框能否拖动
        original: false, // 上传图片按照原始比例渲染
        centerBox: false, // 截图框是否被限制在图片里面
        infoTrue: false, // true 为展示真实输出图片宽高 false 展示看到的截图框宽高
        mode: '100% auto' // 图片默认渲染方式
      },
      picurllist1: [],
      picurllist2: [],
      showCropper1: false, // 截图弹窗遮罩默认隐藏
      message: '',
      sex: '',
      xuexiao: '',
      bmqd: '',
      picurlsss: '',
      istrue: false,
      images: [],
      loadings: false,
      showPicker1: false,

    }
  },
  components: {
    'app-VueCropper': VueCropper,
  },
  created: function () {
    this.$emit('footer', true);
  },


  mounted() {
    this.recordapi();
  },
  activated() {
    if (this.$route.meta.keepAlive) {
      this.$emit('footer', true);
    }
  },
  metaInfo() {
    const title = '活动详情'
    return {
      title,
      meta: [{
        description: this.info.description
      },
      {
        keywords: this.info.keyword
      },
      ]
    }
  },
  methods: {
    getAuth() {
      if (this.authInfo.name == '') {
        Toast('请输入姓名')
        return
      }
      if (this.authInfo.idCard == '') {
        Toast('请输入身份证号')
        return
      }
      // 身份证校验
      let reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/
      if (!reg.test(this.authInfo.idCard)) {
        Toast('请输入正确的身份证号')
        return
      }
      this.$api.post('/member/certification', { id_card: this.authInfo.idCard + '', real_name: this.authInfo.name, userid: localStorage.getItem('userid') }).then(res => {
          Toast('认证成功')
          localStorage.setItem('is_certified', 1)
          this.isRz = true
      })
    },
    onSubmit() {
      let that = this
      let name = this.name
      let sex = this.sex
      let wxnumber = this.wxnumber
      let tel = this.tel
      let picurllist = this.picurllist;
      let picurllist1 = this.picurllist1;
      let picurllist2 = this.picurllist2;
      let userid = this.$cookieStore.getCookie('userid');
      let message = this.message;
      let xuexiao = this.xuexiao;
      let bmqd = this.bmqd;
      console.log(userid)
      if (!name) {
        Toast('请输入姓名')
        return false;
      }
      if (!sex) {
        Toast('请选择性别')
        return false;
      }
      if (!tel) {
        Toast('请输入手机号')
        return false;
      }
      let reg = /^1[3456789]\d{9}$/
      if (tel.length !== 11 || !reg.test(tel)) {
        Toast("请输入正确手机号");
        return false
      }
      if (!wxnumber) {
        Toast('请输入微信号')
        return false;
      }

      if (picurllist == 0) {
        Toast('请上传头像')
        return false;
      }
      if (picurllist1 == 0) {
        Toast('请上传照片')
        return false;
      }
      if (!xuexiao) {
        Toast('请输入学校')
        return false;
      }
      if (!bmqd) {
        Toast('请选择报名渠道')
        return false;
      }
      that.$api.post("/member/baoming", {
        'name': name,
        'sex': sex,
        'tel': tel,
        'wxnumber': wxnumber,
        'userid': userid,
        'picurllist': picurllist,
        'picurllist1': picurllist1,
        'picurllist2': picurllist2,
        'content': message,
        'xuexiao': xuexiao,
        'bmqd': bmqd,
      }).then(res => {
        console.log(res);
        if (res.code == 1) {

          this.$toast(res.msg);
          location.reload()
        } else {
          this.$toast(res.msg);
        }
        // this.$router.push({path:'/record/index',query:{setid:2}});
        // that.deletetp = false;
        // that.disabledjy = true;
        // that.buttext = "正 在 审 核 中";
        // Toast(res.msg);
      });
    },
    preview() {
      ImagePreview(this.info.bmxin.avatars)

    },
    preview1() {
      ImagePreview(this.info.bmxin.photos)

    },
    preview2(index) {
      ImagePreview({
        images: this.images,
        startPosition: index,
      })

    },
    onConfirm(value, index) {
      this.sex = value;
      //Toast(`当前值：${value}, 当前索引：${index}`);
      this.showPicker = false;
    },
    changeScale(num) {
      num = num || 1
      this.$refs.cropper.changeScale(num)
    },
    onConfirm1(value, index) {
      this.bmqd = value;
      //Toast(`当前值：${value}, 当前索引：${index}`);
      this.showPicker1 = false;
    },

    change(e) {
      console.log(e);
      let timer = e;
      if (timer.hours < 10) {
        timer.hours = '0' + timer.hours
      }
      if (timer.minutes < 10) {
        timer.minutes = '0' + timer.minutes
      }
      if (timer.seconds < 10) {
        timer.seconds = '0' + timer.seconds
      }

      this.timeData = timer;

    },
    tiao(e) {
      this.$router.push('Usercont?id=' + e)
      console.log(e);
    },
    urllinks(e) {
      this.$router.push(e)
      console.log(e);
    },
    onSearch(e) {

    },

    recordapi() {
      var that = this;
      var userid = that.$cookieStore.getCookie('userid');
      console.log('userId', userid);
      if (!userid) {
        //this.$router.push('Logins')
        this.$router.replace('Logins')
        return false;
      }
      that.$api.post("/Index/member", {
        id: userid
      }).then(res => {
        that.info = res.info;

        if (res.info.bmxin.avatar) {

          this.istrue = true
        } else {
          console.log(2);
        }
        that.images = res.info.bmxin.picarr
        that.content = res.info.huodong.content;
        that.picurlsss = res.info.huodong.picurl
        console.log(res.info.huodong.picurl)
      });
    },
    // 加载
    onJiazai: function () {
      var that = this;
      that.recordapi()
    },
    // 上传文件过大
    onOversize() {
      this.$toast('图片不能大于3M');
    },
    // 获取文件后缀
    getFileSuffix(fileName) {
      return fileName.match(/\/\w+$/)[0].toLowerCase();
    },
    // 选择图片上传前操作，调起剪裁组件
    beforeRead(file) {
      console.log(file);
      if (!this.imageAccept.includes(this.getFileSuffix(file.type))) {
        return this.$toast('请上传 jpg/png 格式图片');
      }
      this.showCropper = true;
      this.imageFileName = file.name;
      // 本地图片转成base64，用于截图框显示本地图片
      this.imageToBase64(file);
    },
    // 选择图片上传前操作，调起剪裁组件
    beforeRead1(file) {
      console.log(file);
      if (!this.imageAccept.includes(this.getFileSuffix(file.type))) {
        return this.$toast('请上传 jpg/png 格式图片');
      }
      this.showCropper1 = true;
      this.imageFileName = file.name;
      // 本地图片转成base64，用于截图框显示本地图片
      this.imageToBase64(file);
    },
    beforeRead2(file) {
      // console.log(file)
      //   new Compressor(file, {
      //     quality: 0.6,

      //     // The compression process is asynchronous,
      //     // which means you have to access the `result` in the `success` hook function.
      //     success(result) {
      //       const formData = new FormData();

      //       // The third parameter is required for server
      //       formData.append('file', result, result.name);
      // var that = this
      //       // Send the compressed image file to server with XMLHttpRequest.
      //       that.$api.post('/path/to/upload', formData).then(() => {
      //         console.log('Upload success');
      //       });
      //     },
      //     error(err) {
      //       console.log(err.message);
      //     },
      //   });
      //   return false;
      console.log(file);
      this.loadings = true;
      if (file.length == undefined) {
        let reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = () => {
          // 截图框中的图片

          var that = this
          that.$api.post("/Upload/uploadcord", {
            'file': reader.result
          }).then(res => {
            this.loadings = false;
            console.log(res);
            if (res.code == 1) {

              // file.status = 'done';
              // file.message = res.data;
              // file.content = res.data;
              console.log(res.data);
              // that.yyzz =[{url: res.user.yyzz}];
              this.picurllist2.push({
                url: res.data
              });
              console.log(this.picurllist2);
            } else {
              setTimeout(() => {
                file.status = 'failed';
                file.message = '上传失败';
              }, 1000);
            }
          })
        }
      } else {
        for (var i = 0; i < file.length; i++) {
          let reader = new FileReader();
          reader.readAsDataURL(file[i]);
          reader.onload = () => {
            // 截图框中的图片

            var that = this
            that.$api.post("/Upload/uploadcord", {
              'file': reader.result
            }).then(res => {
              this.loadings = false;
              console.log(res);
              if (res.code == 1) {

                // file.status = 'done';
                // file.message = res.data;
                // file.content = res.data;
                console.log(res.data);
                // that.yyzz =[{url: res.user.yyzz}];
                this.picurllist2.push({
                  url: res.data
                });
                console.log(this.picurllist2);
              } else {
                setTimeout(() => {
                  file.status = 'failed';
                  file.message = '上传失败';
                }, 1000);
              }
            })
          }
        }
      }






      // this.imageToBase64(file);

    },
    // 将本地图片转化为Base64，否则vue-cropper组件显示不出要本地需要剪裁的图片
    imageToBase64(file) {
      let reader = new FileReader();
      reader.readAsDataURL(file);
      reader.onload = () => {
        // 截图框中的图片
        this.option.img = reader.result;
      }
      reader.onerror = function (error) {
        console.log('Error: ', error)
      }
    },
    // 删除图片
    picurlDelete(file) {
      console.log(file);
      var that = this;
      var imgurl = file.url; // 删除的数据
      const findThisNum = that.picurllist.findIndex(x => x === imgurl)
      console.log(imgurl)
      that.picurllist.splice(findThisNum, 1)

      //that.deleteimg(imgurl);
      // return new Promise((resolve, reject) => {
      // 	console.log("删除文件的回调,afterDelete");
      // 	this.isloadImg = false;
      // 	resolve();
      // });
    },
    // 删除图片1
    picurlDelete1(file) {
      console.log(file);
      var that = this;
      var imgurl = file.url; // 删除的数据
      const findThisNum = that.picurllist1.findIndex(x => x === imgurl)
      console.log(imgurl)
      that.picurllist1.splice(findThisNum, 1)

      //that.deleteimg(imgurl);
      // return new Promise((resolve, reject) => {
      // 	console.log("删除文件的回调,afterDelete");
      // 	this.isloadImg = false;
      // 	resolve();
      // });
    },
    picurlDelete2(file) {
      console.log(file);
      var that = this;
      var imgurl = file.url; // 删除的数据
      const findThisNum = that.picurllist2.findIndex(x => x.url === imgurl)


      that.picurllist2.splice(findThisNum, 1)
      console.log(that.picurllist2)
      //that.deleteimg(imgurl);
      // return new Promise((resolve, reject) => {
      // 	console.log("删除文件的回调,afterDelete");
      // 	this.isloadImg = false;
      // 	resolve();
      // });
    },
    // 确认剪裁并上传图片
    async getCropBlob() {
      this.loadings = true
      this.showCropper = false;
      // this.$toast('上传中', 0);
      let formData = new FormData();
      this.$refs.cropper.getCropData((data) => {
        console.log(data);
        var that = this
        that.$api.post("/Upload/uploadcord", {
          'file': data
        }).then(res => {
          console.log(res);
          this.loadings = false
          if (res.code == 1) {

            // file.status = 'done';
            // file.message = res.data;
            // file.content = res.data;
            console.log(res.data);
            // that.yyzz =[{url: res.user.yyzz}];
            this.picurllist.push({
              url: res.data
            });
            console.log(this.picurllist);
          } else {
            setTimeout(() => {
              file.status = 'failed';
              file.message = '上传失败';
            }, 1000);
          }
        })
      })
    },
    async getCropBlob1() {

      this.loadings = true
      this.showCropper1 = false;
      // this.$toast('上传中', 0);
      let formData = new FormData();
      this.$refs.cropper.getCropData((data) => {
        // console.log(data);
        var that = this
        that.$api.post("/Upload/uploadcord", {
          'file': data
        }).then(res => {
          this.loadings = false
          console.log(res);
          if (res.code == 1) {

            // file.status = 'done';
            // file.message = res.data;
            // file.content = res.data;
            console.log(res.data);
            // that.yyzz =[{url: res.user.yyzz}];
            this.picurllist1.push({
              url: res.data
            });
            console.log(this.picurllist1);
          } else {
            setTimeout(() => {
              file.status = 'failed';
              file.message = '上传失败';
            }, 1000);
          }
        })
      })
    },
    // 旋转图片
    rotateImage() {
      this.$refs.cropper.rotateRight();

    },

    // 取消截图上传头像
    cancelCropper() {
      this.showCropper = false; // 隐藏切图遮罩
      this.showCropper1 = false; // 隐藏切图遮罩
      this.showPopup = true;
    },


    // 图片删除方法
    deleteimg(imgurl) {
      var that = this;
      this.isloadImg = true;
      that.$api.get("/Upload/imgdelete", {
        'imgurl': imgurl
      }).then(res => {
        // console.log(res);
        Toast(res.msg);
      });
    },
  }
}
</script>
